<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申请退款+退款原因</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/return.css">
</head>

<body class="body">
    <header class="header">
        <a href="javascript:;" class="left-arrow"></a>
        <div class="header_font">
            <p>申请退款</p>
        </div>
        <a href="" class="more"></a>
    </header>
    <div>
        <div class="commodity-details">
            <div class="commodity-details-body">
                <div class="commodity-pic"></div>
                <div class="commodity-text">
                    <p>依泉润唇膏套装 保湿滋润补水无色防干裂 唇部护理唇膜淡化唇纹护唇膏...</p>
                    <i>8g/ml</i>
                </div>
                <div class="commodity-price">
                    <p>¥98.9</p>
                    <p>x1</p>
                </div>
            </div>
        </div>
        <div class="refund">
            <div class="refund-reason">
                <a>退款原因</a>
                <div>请选择<i>></i></div>
            </div>
            <div class="money">
                <a>退款金额</a>
                <div class="colora">¥98.9</div>
            </div>
            <div class="explain">
                <a>退款说明</a>
                <i>&nbsp;&nbsp;&nbsp;选填</i>
            </div>
        </div>
        <div class="voucher">
            <div class="voucher-text">
                <p>上传凭证</p>
            </div>
            <div class="return"></div>
        </div>
        <div class="submuit">
            <a href="./returndetail.html">提交</a>
        </div>

    </div>
    <div class="bg none">
        <div class="cause">
            <div id="close" class="off"></div>
            <div class="cause_title">
                <p>退款原因</p>
            </div>
            <div class="detailed-explanation">
                <ul>
                    <li>
                        <div>错拍/多拍/不想要</div>
                        <div class="pick"></div>
                        <div class="picked none"></div>
                    </li>
                    <div class="border"></div>
                    <li>
                        <div>协商一致退款</div>
                        <div class="pick"></div>
                        <div class="picked none"></div>
                    </li>
                    <div class="border"></div>
                    <li>
                        <div>缺货</div>
                        <div class="pick"></div>
                        <div class="picked none"></div>
                    </li>
                    <div class="border"></div>
                    <li>
                        <div>未按约定时间发货</div>
                        <div class="pick"></div>
                        <div class="picked none"></div>
                    </li>
                    <div class="border"></div>
                    <li>
                        <div>其他</div>
                        <div class="pick"></div>
                        <div class="picked none"></div>
                    </li>
                </ul>

            </div>
        </div>
    </div>
    <script src="./js/rem.js "></script>
    <script>
        goBack('.left-arrow')
        function show() {
            var choice = document.querySelector('.refund-reason');
            var cause = document.querySelector('.bg');
            var close = document.querySelector('#close');

            choice.addEventListener('click', function () {
                cause.style.display = 'block'
            })
            close.addEventListener('click', function () {
                cause.style.display = 'none'
            })
        }
        show()

        function Pick() {
            var Lis = document.getElementsByTagName('li');
            var Pick = document.getElementsByClassName('pick');
            var Picked = document.getElementsByClassName('picked');

            for (let i = 0; i < Lis.length; i++) {
                let f = true
                Lis[i].onclick = function () {
                    if (f) {
                        f = false
                        Pick[i].style.display = 'none'
                        Picked[i].style.display = 'block'
                    } else {
                        f = true
                        Pick[i].style.display = 'block'
                        Picked[i].style.display = 'none'
                    }
                    console.log(i);
                }

            }

        }
        Pick()
    </script>
</body>

</html>